<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        svg {
            color: inherit;
            width: 1em;
            height: 1em;
            fill: currentColor
        }

        .color-picker-wrapper {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 240px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            font-size: 14px;
        }

        .color-picker-wrapper li {
            border: 1px solid transparent;
            border-radius: 3px 3px;
            cursor: pointer;
            padding: 2px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .color-picker-wrapper .clear {
            width: 100%;
            border: 1px solid #eee;
        }

        .color-picker-wrapper .clear svg {
            height: 16px;
            width: 16px;
            margin-right: 4px;
            margin-bottom: -2px;
        }

        .color-picker-wrapper li:hover,
        .color-picker-wrapper li.active {
            border-color: currentColor
        }

        .color-picker-wrapper li .color-block {
            border-radius: 3px 3px;
            width: 100%;
            height: 100%;
            border: 1px solid #eee;
        }
    </style>
</head>

<body>
    <div class="aaaaaaaaaaaaaaaaaaaaaaa">

    </div>
    <!-- <ul class="color-picker-wrapper">
        <li data-value="0" class="clear">
            <svg viewBox="0 0 1024 1024">
                <path
                    d="M236.8 128L896 787.2V128H236.8z m614.4 704L192 172.8V832h659.2zM192 64h704c38.4 0 64 25.6 64 64v704c0 38.4-25.6 64-64 64H192c-38.4 0-64-25.6-64-64V128c0-38.4 25.6-64 64-64z">
                </path>
            </svg>
            默认颜色
        </li>
        <li>
            <div class="color-block" data-value="rgb(0, 0, 0)" style="background-color: #000000;"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(38, 38, 38)" style="background-color: rgb(38, 38, 38);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(89, 89, 89)" style="background-color: rgb(89, 89, 89);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(140, 140, 140)" style="background-color: rgb(140, 140, 140);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(191, 191, 191)" style="background-color: rgb(191, 191, 191);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(217, 217, 217)" style="background-color: rgb(217, 217, 217);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(233, 233, 233)" style="background-color: rgb(233, 233, 233);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(245, 245, 245)" style="background-color: rgb(245, 245, 245);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(250, 250, 250)" style="background-color: rgb(250, 250, 250);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(255, 255, 255)" style="background-color: rgb(255, 255, 255);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(225, 60, 57)" style="background-color: rgb(225, 60, 57);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(231, 95, 51)" style="background-color: rgb(231, 95, 51);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(235, 144, 58)" style="background-color: rgb(235, 144, 58);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(245, 219, 77)" style="background-color: rgb(245, 219, 77);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(114, 192, 64)" style="background-color: rgb(114, 192, 64);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(89, 191, 192)" style="background-color: rgb(89, 191, 192);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(66, 144, 247)" style="background-color: rgb(66, 144, 247);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(54, 88, 226)" style="background-color: rgb(54, 88, 226);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(106, 57, 201)" style="background-color: rgb(106, 57, 201);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(216, 68, 147)" style="background-color: rgb(216, 68, 147);"></div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(251, 233, 230)" style="background-color: rgb(251, 233, 230);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(252, 237, 225)" style="background-color: rgb(252, 237, 225);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(252, 239, 212)" style="background-color: rgb(252, 239, 212);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(252, 251, 207)" style="background-color: rgb(252, 251, 207);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(231, 246, 213)" style="background-color: rgb(231, 246, 213);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(218, 244, 240)" style="background-color: rgb(218, 244, 240);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(217, 237, 250)" style="background-color: rgb(217, 237, 250);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(224, 232, 250)" style="background-color: rgb(224, 232, 250);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(237, 225, 248)" style="background-color: rgb(237, 225, 248);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(246, 226, 234)" style="background-color: rgb(246, 226, 234);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(255, 163, 158)" style="background-color: rgb(255, 163, 158);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(255, 187, 150)" style="background-color: rgb(255, 187, 150);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(255, 213, 145)" style="background-color: rgb(255, 213, 145);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(255, 251, 143)" style="background-color: rgb(255, 251, 143);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(183, 235, 143)" style="background-color: rgb(183, 235, 143);">
            </div>
        </li>
        <li>
            <div class="color-block" data-value="rgb(135, 232, 222)" style="background-color: rgb(135, 232, 222);">
            </div>
        </li>
        <li data-value="rgb(145, 213, 255)">
            <div class="color-block" data-value="rgb(145, 213, 255)" style="background-color: rgb(145, 213, 255);">
            </div>
        </li>
        <li data-value="rgb(173, 198, 255)">
            <div class="color-block" data-value="rgb(173, 198, 255)" style="background-color: rgb(173, 198, 255);">
            </div>
        </li>
        <li data-value="rgb(211, 173, 247)">
            <div class="color-block" data-value="rgb(211, 173, 247)" style="background-color: rgb(211, 173, 247);">
            </div>
        </li>
        <li data-value="rgb(255, 173, 210)">
            <div class="color-block" data-value="rgb(255, 173, 210)" style="background-color: rgb(255, 173, 210);">
            </div>
        </li>
        <li data-value="rgb(255, 77, 79)">
            <div class="color-block" data-value="rgb(255, 77, 79)" style="background-color: rgb(255, 77, 79);"></div>
        </li>
        <li data-value="rgb(255, 122, 69)">
            <div class="color-block" data-value="rgb(255, 122, 69)" style="background-color: rgb(255, 122, 69);"></div>
        </li>
        <li data-value="rgb(255, 169, 64)">
            <div class="color-block" data-value="rgb(255, 169, 64)" style="background-color: rgb(255, 169, 64);"></div>
        </li>
        <li data-value="rgb(255, 236, 61)">
            <div class="color-block" data-value="rgb(255, 236, 61)" style="background-color: rgb(255, 236, 61);"></div>
        </li>
        <li data-value="rgb(115, 209, 61)">
            <div class="color-block" data-value="rgb(115, 209, 61)" style="background-color: rgb(115, 209, 61);"></div>
        </li>
        <li data-value="rgb(54, 207, 201)">
            <div class="color-block" data-value="rgb(54, 207, 201)" style="background-color: rgb(54, 207, 201);"></div>
        </li>
        <li data-value="rgb(64, 169, 255)">
            <div class="color-block" data-value="rgb(64, 169, 255)" style="background-color: rgb(64, 169, 255);"></div>
        </li>
        <li data-value="rgb(89, 126, 247)">
            <div class="color-block" data-value="rgb(89, 126, 247)" style="background-color: rgb(89, 126, 247);"></div>
        </li>
        <li data-value="rgb(146, 84, 222)">
            <div class="color-block" data-value="rgb(146, 84, 222)" style="background-color: rgb(146, 84, 222);"></div>
        </li>
        <li data-value="rgb(247, 89, 171)">
            <div class="color-block" data-value="rgb(247, 89, 171)" style="background-color: rgb(247, 89, 171);"></div>
        </li>
        <li data-value="rgb(207, 19, 34)">
            <div class="color-block" data-value="rgb(207, 19, 34)" style="background-color: rgb(207, 19, 34);"></div>
        </li>
        <li data-value="rgb(212, 56, 13)">
            <div class="color-block" data-value="rgb(212, 56, 13)" style="background-color: rgb(212, 56, 13);"></div>
        </li>
        <li data-value="rgb(212, 107, 8)">
            <div class="color-block" data-value="rgb(212, 107, 8)" style="background-color: rgb(212, 107, 8);"></div>
        </li>
        <li data-value="rgb(212, 177, 6)">
            <div class="color-block" data-value="rgb(212, 177, 6)" style="background-color: rgb(212, 177, 6);"></div>
        </li>
        <li data-value="rgb(56, 158, 13)">
            <div class="color-block" data-value="rgb(56, 158, 13)" style="background-color: rgb(56, 158, 13);"></div>
        </li>
        <li data-value="rgb(8, 151, 156)">
            <div class="color-block" data-value="rgb(8, 151, 156)" style="background-color: rgb(8, 151, 156);"></div>
        </li>
        <li data-value="rgb(9, 109, 217)">
            <div class="color-block" data-value="rgb(9, 109, 217)" style="background-color: rgb(9, 109, 217);"></div>
        </li>
        <li data-value="rgb(29, 57, 196)">
            <div class="color-block" data-value="rgb(29, 57, 196)" style="background-color: rgb(29, 57, 196);"></div>
        </li>
        <li data-value="rgb(83, 29, 171)">
            <div class="color-block" data-value="rgb(83, 29, 171)" style="background-color: rgb(83, 29, 171);"></div>
        </li>
        <li data-value="rgb(196, 29, 127)">
            <div class="color-block" data-value="rgb(196, 29, 127)" style="background-color: rgb(196, 29, 127);"></div>
        </li>
        <li data-value="rgb(130, 0, 20)">
            <div class="color-block" data-value="rgb(130, 0, 20)" style="background-color: rgb(130, 0, 20);"></div>
        </li>
        <li data-value="rgb(135, 20, 0)">
            <div class="color-block" data-value="rgb(135, 20, 0)" style="background-color: rgb(135, 20, 0);"></div>
        </li>
        <li data-value="rgb(135, 56, 0)">
            <div class="color-block" data-value="rgb(135, 56, 0)" style="background-color: rgb(135, 56, 0);"></div>
        </li>
        <li data-value="rgb(97, 71, 0)">
            <div class="color-block" data-value="rgb(97, 71, 0)" style="background-color: rgb(97, 71, 0);"></div>
        </li>
        <li data-value="rgb(19, 82, 0)">
            <div class="color-block" data-value="rgb(19, 82, 0)" style="background-color: rgb(19, 82, 0);"></div>
        </li>
        <li data-value="rgb(0, 71, 79)">
            <div class="color-block" data-value="rgb(0, 71, 79)" style="background-color: rgb(0, 71, 79);"></div>
        </li>
        <li data-value="rgb(0, 58, 140)">
            <div class="color-block" data-value="rgb(0, 58, 140)" style="background-color: rgb(0, 58, 140);"></div>
        </li>
        <li data-value="rgb(6, 17, 120)">
            <div class="color-block" data-value="rgb(6, 17, 120)" style="background-color: rgb(6, 17, 120);"></div>
        </li>
        <li data-value="rgb(34, 7, 94)">
            <div class="color-block" data-value="rgb(34, 7, 94)" style="background-color: rgb(34, 7, 94);"></div>
        </li>
        <li data-value="rgb(120, 6, 80)">
            <div class="color-block" data-value="rgb(120, 6, 80)" style="background-color: rgb(120, 6, 80);"></div>
        </li>
    </ul> -->

    <script>
        // const els = document.querySelectorAll('.color-block')
        // const colors = []
        // for (const el of els) {
        //     colors.push(el.dataset.value)
        // }
        // console.log(JSON.stringify(colors))
        class ColorPicker {
            colors = [
                "rgb(0, 0, 0)",
                "rgb(38, 38, 38)",
                "rgb(89, 89, 89)",
                "rgb(140, 140, 140)",
                "rgb(191, 191, 191)",
                "rgb(217, 217, 217)",
                "rgb(233, 233, 233)",
                "rgb(245, 245, 245)",
                "rgb(250, 250, 250)",
                "rgb(255, 255, 255)",
                "rgb(225, 60, 57)",
                "rgb(231, 95, 51)",
                "rgb(235, 144, 58)",
                "rgb(245, 219, 77)",
                "rgb(114, 192, 64)",
                "rgb(89, 191, 192)",
                "rgb(66, 144, 247)",
                "rgb(54, 88, 226)",
                "rgb(106, 57, 201)",
                "rgb(216, 68, 147)",
                "rgb(251, 233, 230)",
                "rgb(252, 237, 225)",
                "rgb(252, 239, 212)",
                "rgb(252, 251, 207)",
                "rgb(231, 246, 213)",
                "rgb(218, 244, 240)",
                "rgb(217, 237, 250)",
                "rgb(224, 232, 250)",
                "rgb(237, 225, 248)",
                "rgb(246, 226, 234)",
                "rgb(255, 163, 158)",
                "rgb(255, 187, 150)",
                "rgb(255, 213, 145)",
                "rgb(255, 251, 143)",
                "rgb(183, 235, 143)",
                "rgb(135, 232, 222)",
                "rgb(145, 213, 255)",
                "rgb(173, 198, 255)",
                "rgb(211, 173, 247)",
                "rgb(255, 173, 210)",
                "rgb(255, 77, 79)",
                "rgb(255, 122, 69)",
                "rgb(255, 169, 64)",
                "rgb(255, 236, 61)",
                "rgb(115, 209, 61)",
                "rgb(54, 207, 201)",
                "rgb(64, 169, 255)",
                "rgb(89, 126, 247)",
                "rgb(146, 84, 222)",
                "rgb(247, 89, 171)",
                "rgb(207, 19, 34)",
                "rgb(212, 56, 13)",
                "rgb(212, 107, 8)",
                "rgb(212, 177, 6)",
                "rgb(56, 158, 13)",
                "rgb(8, 151, 156)",
                "rgb(9, 109, 217)",
                "rgb(29, 57, 196)",
                "rgb(83, 29, 171)",
                "rgb(196, 29, 127)",
                "rgb(130, 0, 20)",
                "rgb(135, 20, 0)",
                "rgb(135, 56, 0)",
                "rgb(97, 71, 0)",
                "rgb(19, 82, 0)",
                "rgb(0, 71, 79)",
                "rgb(0, 58, 140)",
                "rgb(6, 17, 120)",
                "rgb(34, 7, 94)",
                "rgb(120, 6, 80)"
            ]
            cols = 10
            $parent = null
            $el = null
            constructor(parent) {
                this.$parent = parent
                return this
            }
            init(el) {
                if (!this.$el) {
                    this.$el = el
                    this.view()
                    this.bind()
                }

            }
            view() {
                let colorsHtml = []
                for (const color of this.colors) {
                    colorsHtml.push(`<li data-value="${color}">
                        <div class="color-block" data-value="${color}" style="background-color: ${color};"></div>
                    </li>`)
                }
                colorsHtml = colorsHtml.join('')
                const html = `<ul class="color-picker-wrapper">
                    <li data-value="0" class="clear">
                        <svg viewBox="0 0 1024 1024">
                            <path d="M236.8 128L896 787.2V128H236.8z m614.4 704L192 172.8V832h659.2zM192 64h704c38.4 0 64 25.6 64 64v704c0 38.4-25.6 64-64 64H192c-38.4 0-64-25.6-64-64V128c0-38.4 25.6-64 64-64z"></path>
                        </svg>
                        默认颜色
                    </li>
                    ${colorsHtml}
                </ul>`
                this.$el.innerHTML = html
            }
            bind() {
                const that = this
                const el = document.querySelector('.color-picker-wrapper')
                el.addEventListener('click', (e) => {
                    if (e.target.tagName === 'LI'
                        || e.target.classList.contains('color-block')) {
                        const color = e.target.dataset.value
                        this.updateCurrentColor(color)
                        that.$parent && that.$parent.updateCurrentColor(color)
                    }

                })
            }

            updateCurrentColor(color) {
                this.currentColor = color
            }

        }

        const colorPicker = new ColorPicker({
            updateCurrentColor(color) {
                console.log({ color })
            }
        }).init(
            document.querySelector('.aaaaaaaaaaaaaaaaaaaaaaa')
        )
    </script>
</body>

</html>